<template>
  <div class="content-warp">
    <div class="header none-border">
        <el-tabs class="w-full" @tab-change="handleClick">
          <el-tab-pane
            :label="tab.label"
            v-for="(tab, index) in tabData"
            :name="tab.value"
            :key="index"
          ></el-tab-pane>
        </el-tabs>
      <el-button type="primary" icon="Plus" @click="btnAdd">新增</el-button>
    </div>
    <div class="search"> 
      <div class="search-left">
    <el-form class="search-container" ref="searchFromRef" :inline="true" :model="queryParams" label-width="auto"> 
      <el-form-item label="组织" prop="fSaleOrgId">
        <el-select v-model="queryParams.realFOrgId" clearable placeholder="请选择组织">
          <el-option
            v-for="item in ORG_LIST_CACHE"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="单据类型" prop="fBillTypeDictId">
        <el-select v-model="queryParams.fBillTypeDictId" clearable placeholder="请选择单据类型">
          <el-option-group v-for="group in groupedOptions" :key="group.id" :label="group.label">
            <el-option
              v-for="option in group.children"
              :key="option.id"
              :label="option.label"
              :value="option.value"
            />
          </el-option-group>
        </el-select>
      </el-form-item>
      <el-form-item label="单据编号" prop="fBillNo">
        <el-input v-model="queryParams.fBillNo" placeholder="请输入单据编号" clearable />
      </el-form-item>
      <el-form-item label="日期" prop="fDate">
        <dc-date-range
          v-model:startDate="queryParams.startTime"
          v-model:endDate="queryParams.endTime"
          :clearable="false"
        />
      </el-form-item>
      <el-form-item label="客户" prop="fCustId">
        <el-select
          v-model="queryParams.fCustId"
          filterable
          remote
          reserve-keyword
          placeholder="请输入客户名称进行搜索"
          :remote-method="remoteCustomerOptions"
          clearable
        >
          <el-option
            v-for="item in customerOptions"
            :key="item.customerFNumber"
            :label="item.customerFName"
            :value="item.customerFNumber"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="处理人" prop="fDate">
        <dc-select-user
          v-model="queryParams.currentOperatorId"
          placeholder="请选择处理人"
          returnType="string"
          :multiple="false"
          :multiple-limit="1"
        />
      </el-form-item>
    </el-form>
  </div>
      <div class="search-right">
        <el-button type="primary" @click="getData">查询</el-button>
        <el-button @click="handleReset">重置</el-button>
      </div>
    </div>

    <div class="form-btn">
      <el-button type="primary" icon="Delete" @click="handleDelete">删除</el-button>
    </div>

    <div class="table-container">
      <el-table
        :data="dataList"
        @row-dblclick="handleRowDbClick"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="序号" width="60" type="index" align="center">
          <template #default="scoped">
            <span>{{ (queryParams.current - 1) * queryParams.size + scoped.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="dcErpOrderStatus"
          label="单据状态"
          align="center"
          show-overflow-tooltip
          width="100"
        >
          <template #default="scoped">
            <dc-dict
              type="text"
              :options="DC_ERP_ORDER_STATUS"
              :value="scoped.row.dcErpOrderStatus"
            ></dc-dict>
          </template>
        </el-table-column>
        <el-table-column
          prop="currentOperatorId"
          label="当前处理人"
          align="center"
          show-overflow-tooltip
          width="100"
        >
          <template #default="scoped">
            <dc-view v-model="scoped.row.currentOperatorId" objectName="user" />
          </template>
        </el-table-column>
        <el-table-column
          prop="fBillTypeDictId"
          label="单据类型"
          align="center"
          show-overflow-tooltip
          width="100"
        >
          <template #default="scoped">
            <dc-dict
              type="text"
              :options="DC_BILL_TYPE"
              :value="scoped.row.fBillTypeDictId"
            ></dc-dict>
          </template>
        </el-table-column>
        <el-table-column
          prop="fBillNo"
          label="单据编号"
          align="center"
          show-overflow-tooltip
          width="120"
        >
          <template #default="scoped">
            {{ scoped.row.fBillNo }}
          </template>
        </el-table-column>
        <el-table-column
          prop="fDate"
          label="日期"
          align="center"
          show-overflow-tooltip
          width="110"
        />
        <el-table-column
          prop="realFOrgId"
          label="组织"
          align="center"
          show-overflow-tooltip
          width="110"
        >
          <template #default="scoped">
            <dc-dict type="text" :options="ORG_LIST_CACHE" :value="scoped.row.realFOrgId" />
          </template>
        </el-table-column>
        <el-table-column
          prop="fMaterialId"
          label="物料编码"
          align="center"
          show-overflow-tooltip
          width="150"
        />
        <el-table-column
          prop="fMaterialName"
          label="物料名称"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column prop="fTpmName" label="TPM" align="center" show-overflow-tooltip />
        <el-table-column
          prop="fCustName"
          label="客户"
          align="center"
          show-overflow-tooltip
          width="250"
        />
        <el-table-column prop="fSalerName" label="销售员" align="center" show-overflow-tooltip />
        <el-table-column
          prop="fSaleDeptName"
          label="销售部门"
          align="center"
          show-overflow-tooltip
          width="120"
        />
        <el-table-column
          prop="fOraText3Name"
          label="运营跟单"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column prop="fBdkText6" label="采购" align="center" show-overflow-tooltip />
        <el-table-column prop="fBdkBase" label="项目编码" align="center" show-overflow-tooltip />
        <el-table-column
          prop="fOraBaseName"
          label="终端客户"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column prop="fNote" label="备注" align="center" show-overflow-tooltip />
        <el-table-column prop="fOraCombo" label="订单类型" align="center" show-overflow-tooltip />
        <!-- <el-table-column prop="fOraCombo" label="项目" align="center" show-overflow-tooltip>
          <template #default="scoped">
            {{ scoped.row }}
          </template>
        </el-table-column> -->

        <el-table-column prop="fEwIsDev" label="研发订单" align="center" show-overflow-tooltip>
          <template #default="scoped">
            {{ scoped.row.fewIsDev }}
            <span v-if="scoped.row.fewIsDev === true">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column>
        <!-- <el-table-column
          prop="fewAttachmentCount"
          label="附件数"
          align="center"
          show-overflow-tooltip
        /> -->
        <el-table-column label="操作" align="center" fixed="right" width="80">
          <template #default="scoped">
            <el-button link type="primary" @click="handleDetail(scoped.row)">查看</el-button>
            <!-- <el-button link icon="Delete" @click="handleDelete(scoped.row)">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <dc-pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.current"
      v-model:limit="queryParams.size"
      @pagination="getData"
    />
  </div>
</template>
<script setup name="ExecutionList">
import { reactive, toRefs, onMounted, watch } from 'vue';
import Api from '@/api/index';

const { proxy } = getCurrentInstance();

const router = useRouter();

const { DC_BILL_TYPE, DC_ERP_ORDER_STATUS, ORG_LIST_CACHE } = proxy.useCache([
  { key: 'DC_BILL_TYPE' },
  { key: 'DC_ERP_ORDER_STATUS' },
  { key: 'ORG_LIST_CACHE' },
]);

const data = reactive({
  loading: true,
  queryParams: {
    current: 1,
    size: 10,
    realFOrgId: '100006',
  },
  total: 0,
  tabData: [
    { label: '全部', value: 'all' },
    { label: '进行中', value: 'processing' },
    { label: '已关闭', value: 'close' },
    { label: '我的', value: 'my' },
  ],
  dataList: [],
  projectType: [],
  customerOptions: [],
  selectedIds: null,
});

const {
  loading,
  queryParams,
  total,
  tabData,
  dataList,
  projectType,
  customerOptions,
  selectedIds,
} = toRefs(data);

onMounted(() => {
  dict();
  getData();
});

// 分组逻辑：通过 parentId 将数据分组
const groupedOptions = computed(() => {
  const topLevelGroups = DC_BILL_TYPE.value.filter(item => item.parentId === '1870707615783387138');
  return topLevelGroups.map(group => {
    return {
      id: group.id,
      label: group.label,
      children: DC_BILL_TYPE.value.filter(item => item.parentId === group.id),
    };
  });
});

// 获取列表数据
const getData = async () => {
  loading.value = true;
  try {
    const res = await Api.pdp.dcErporder.list(queryParams.value);
    const { code, data } = res.data;
    if (code == 200) {
      dataList.value = data.records;
      total.value = data.total;
    }
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
};

watch(
  () => {
    const timer = setTimeout(() => {
      getData();
      clearTimeout(timer);
    }, 800);
  },
  { immediate: true } // 组件初始化时立即执行一次);
);

// 获取字典
const dict = async () => {
  loading.value = true;
  try {
    const res = await Api.pdp.dcErporder.dict();
    const { code, data } = res.data;
    if (code == 200) {
      projectType.value = data.项目类型;
    }
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
};

// 点击搜索
const handleSerch = () => {
  queryParams.value.current = 1;
  getData();
};

//点击重置
const handleReset = () => {
  queryParams.value = {
    current: 1,
    size: 10,
    realFOrgId: '100006',
  };
  proxy.resetForm('searchFromRef');
  getData();
};

// tab点击
const handleClick = tab => {
  queryParams.value = {
    ...queryParams.value,
    current: 1,
    levelClass: tab,
  };
  getData();
};

const btnAdd = () => {
  router.push({
    path: '/pdp/execution/steps/create',
  });
};

/** 查看 */
const handleDetail = row => {
  router.push({
    path: `/pdp/execution/steps/${row.id}`,
  });
};

// 远程搜索获取客户列表
const remoteCustomerOptions = async fullname => {
  if (!fullname && fullname.length < 2) return;
  const form = {
    name: fullname,
  };

  const res = await Api.pdp.erpSelect.customers(form);
  const { code, data } = res.data;
  if (code === 200) {
    customerOptions.value = data;
  }
};

// 删除
const handleDelete = () => {
  const configIds = { ids: selectedIds.value };
  proxy
    .$confirm('是否确认删除参数编号为"' + selectedIds.value + '"的数据项？')
    .then(async () => {
      return await Api.pdp.dcErporder.remove(configIds);
    })
    .then(() => {
      proxy.$message.success('删除成功');
      getData();
    })
    .catch(() => {});
};

// 勾选事件
const handleSelectionChange = selection => {
  selectedIds.value = selection.map(item => item.id).join(',');
};

const handleRowDbClick = row => handleDetail(row);
</script>
